<template>
  <div class="public">
    <el-button type="primary" @click="changeDialog">添加</el-button>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 弹框的内容 -->
      <DialogForm :addressList="addressList" @getFrom="getDialogFrom" />
    </el-dialog>

    <!-- 列表 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="title" label="活动名称" width="180">
      </el-table-column>
      <el-table-column prop="address" label="活动区域" width="180">
        <template slot-scope="scope">
          <div>{{ EmnuAddress[scope.row.address] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="活动时间" width="180">
      </el-table-column>
      <el-table-column prop="delivery" label="及时配送">
        <template slot-scope="scope">
          {{ scope.row.delivery ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="resource" label="特殊资源">
        <template slot-scope="scope">
          {{ scope.row.resource ? "线下场地免费" : "线上品牌商赞助" }}
        </template>
      </el-table-column>
      <el-table-column prop="form" label="活动形式">
        <template slot-scope="scope">
          <div v-html="scope.row.form"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import DialogForm from "@/components/DialogForm";
import { apigetAddress, apoAddList, apigetList } from "@/api";
import { EmnuAddress } from "@/page";
export default {
  components: {
    DialogForm,
  },
  data() {
    return {
      EmnuAddress,
      list: [],
      addressList: [],
      dialogVisible: false,
      form: {}, // 用来搜集from表单中的内容
    };
  },
  created() {
    // 获取地区
    apigetAddress().then((res) => {
      this.addressList = res.data;
    });

    // 获取list
    this.getList();
  },
  methods: {
    // 关闭弹框的回调函数
    handleClose() {
      this.changeDialog();
    },
    // 改变弹框的显示与隐藏
    changeDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 获取数据列表
    getList() {
      apigetList().then((res) => {
        this.list = res.data;

        console.log(this.list);
      });
    },
    // 创建
    getDialogFrom(value) {
      // 获取弹框中的参数
      const data = {
        ...value,
        date: `${value.date1} ${value.date2}`,
      };

      // 添加
      apoAddList(data).then((res) => {
        this.$message({
          type: "success", // success error warning
          message: "添加成功",
          duration: 2000,
        });

        // 获取数据列表
        this.getList();
      });
    },
  },
};
</script>